<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/menu1.css" />
		<title>练习02 实现菜单的收缩与扩展</title>
		<style>
			body {
				margin: 0;
			}
			ul {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			.left-nav {
				background: lightgray;
                height: 100%;
                overflow-y: overlay;
                position: absolute;    
			}
			/**菜单box**/
			.menuBox {
				width: 300px;
				margin: 5px;
			}
			/**默认不显示二级菜单**/
			.menuBox .subMenuBox {
				display: none;
			}
			/**一级菜单样式**/
			.spMenuBox>*>.spMenu {
				align-items: center;
				background: darkslateblue;
                border-bottom: 1px solid lightgray;
                cursor: pointer;
                color: white;
   
				/**flexbox兼容**/
				display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
                display: -ms-flexbox;           /* TWEENER - IE 10 */
                display: -webkit-flex;          /* NEW - Chrome */
                display: flex;     
                /**flexbox兼容**/
               -webkit-box-orient: horizontal;
               -webkit-flex-direction: row;
               -moz-flex-direction: row;
               -ms-flex-direction: row;
               -o-flex-direction: row;
				flex-direction: row;
               /**flexbox兼容**/
				-webkit-justify-content: space-around;
                -webkit-box-pack: space-around;
                -moz-box-pack: space-around;
                -ms-flex-pack: space-around;
				justify-content: space-around;
				/**user-select兼容**/
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				-o-user-select: none;
				user-select: none;
			}


/**最后一个一级菜单样式**/
.spMenuBox>*:last-child>.spMenu {
    align-items: center;
    background: darkslateblue;
    border-bottom: 0px;
    color: white;
    cursor: pointer;
    
    /**flexbox兼容**/
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    display: flex;     
    
    /**flexbox兼容**/
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    /**flexbox兼容**/
    webkit-justify-content: space-around;
    -webkit-box-pack: space-around;
    -moz-box-pack: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    /**user-select兼容**/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/**箭头切换用动画实现**/
.fa-angle-down {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.spMenuItem.active>.spMenu>.fa-angle-down {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}


/**二级菜单样式*/
.subMenuBox>*>.subMenu {
    align-items: center;
    background: #ccc;
    border-bottom: 1px solid lightyellow;
    cursor: pointer;
    padding: 5px 10px;
    
    /**flexbox兼容**/
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    display: flex;     
    /**flexbox兼容**/
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    /**user-select兼容**/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    
}

/**最后一个二级菜单样式**/
.subMenuBox>*:last-child>.subMenu {
    align-items: center;
    background: #ccc;
    border-bottom: 0px;
    cursor: pointer;
    padding: 5px 10px;
    
    /**flexbox兼容**/
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    display: flex;
    /**flexbox兼容**/
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    /**user-select兼容**/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none; 
}
		</style>
	</head>

	<body>
		<div id="leftNav" class="left-nav">
			<div id="myMenu" class="menuBox">
				<ul class="spMenuBox">
					<li class="spMenuItem">
						<div class="spMenu" onClick=" myFun(this)">
							<i class="fa fa-folder"></i>
							<span>菜单1</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单1.1</span></li>
							<li><span class="subMenu">菜单1.2</span></li>
							<li><span class="subMenu">菜单1.3</span></li>
							<li><span class="subMenu">菜单1.4</span></li>
							<li><span class="subMenu">菜单1.5</span></li>
							<li><span class="subMenu">菜单1.6</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" onClick=" myFun(this)">
							<i class="fa fa-folder"></i>
							<span>菜单2</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
							<li><span class="subMenu">菜单2.4</span></li>
							<li><span class="subMenu">菜单2.5</span></li>
							<li><span class="subMenu">菜单2.6</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" onClick=" myFun(this)">
							<i class="fa fa-folder"></i>
							<span>菜单3</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.4</span></li>
							<li><span class="subMenu">菜单3.5</span></li>
							<li><span class="subMenu">菜单3.6</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" onClick=" myFun(this)">
							<i class="fa fa-folder"></i>
							<span>菜单4</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单4.1</span></li>
							<li><span class="subMenu">菜单4.2</span></li>
							<li><span class="subMenu">菜单4.3</span></li>
							<li><span class="subMenu">菜单4.4</span></li>
							<li><span class="subMenu">菜单4.5</span></li>
							<li><span class="subMenu">菜单4.6</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" onClick=" myFun(this)">
							<i class="fa fa-folder"></i>
							<span>菜单5</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
							<li><span class="subMenu">菜单5.4</span></li>
							<li><span class="subMenu">菜单5.5</span></li>
							<li><span class="subMenu">菜单5.6</span></li>
						</ul>
					</li>
				</ul>
			</div>
		
		</div>
	</body>
	<script>
		function myFun(obj){
			var parent=obj.parentNode;
			var child=parent.children;
			var a=child[1].style.display;
			var objchild=obj.children;
			if(a=="none"){
				var c=document.getElementsByClassName("spMenuItem");
				for(var i=0;i<c.length;i++){
					c[i].className="spMenuItem";
					c[i].children[0].children[0].className="fa fa-folder";
					c[i].children[1].style.display="none";
				}
				child[1].style.display="block";
				objchild[0].className="fa fa-folder-open";
				parent.className="spMenuItem active";
				
			}
			else{
				child[1].style.display="none";
				objchild[0].className="fa fa-folder";
				parent.className="spMenuItem";
				
			}
		}
	</script>
</html>